<template>
  <div>
    <div class="flex goods_tag">
      <div class="flex flex-1 left_info">
        <el-image :src="$globalObj.imgBaseUrl + goodsData.imgurl" fit="fill" />
        <div class="flex-1">
          <p class="goods_title">{{ goodsData.title }}</p>
          <p class="goods_id">ID: {{ goodsData.goods_id }}</p>
          <p v-show="showCate" class="goods_id">分类: {{ goodsData.cate_name }}</p>
        </div>
      </div>
      <div v-if="showTool" class="flex flex-column align-center justify-center tool">
        <template v-if="showSort">
          <span class="pointer" @click="$emit('upSort')"><i class="el-icon-top" /></span>
          <span class="pointer" @click="$emit('downSort')"><i class="el-icon-bottom" /></span>
        </template>
        <span class="pointer" @click="$emit('handleDelete')"><i class="el-icon-delete" /></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goodsData: {
      type: Object,
      default: null
    },
    showSort: {
      type: Boolean,
      default: true
    },
    showTool: {
      type: Boolean,
      default: true
    },
    showCate: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.goods_tag {
  border: 1px solid #eeeeee;
  margin-bottom: 10px;

  .left_info {
    padding: 10px;

    &>div p {
      color: #999999;
      margin-top: 10px;

      &:first-child {
        color: #666666;
        margin-top: 0;
      }
    }
  }

  .el-image {
    width: 90px;
    height: 90px;
    margin-right: 10px;
  }

  .tool {
    width: 30px;
    border-left: 1px solid #eeeeee;

    span+span {
      margin-top: 20px;
    }
  }
}
</style>
